<template>
  <div class="chat-container">
    <div class="top-box">
      <van-icon name="volume-o" />
      <div class="top">首次立体浮雕牛、首次金银双金属材质、首次金银定位浮雕工艺</div>
    </div>
    <leave-message nickname="贲松昭" admin top>恭喜大哥喜提 QQ 一台</leave-message>
    <leave-message nickname="楼悦朋" top>恭喜大哥喜提 QQ 一台，恭喜大哥喜提 QQ 一台</leave-message>
    <ChatActionBar />
  </div>
</template>

<script>
import { Image, NoticeBar } from "vant";
import { defineComponent } from "vue";
import LeaveMessage from "./LeaveMessage";
import ChatActionBar from "./ChatActionBar";

export default ({
  name: "ChatContainer",
  components: {
    ChatActionBar,
    LeaveMessage,
    [Image.name]: Image,
    [NoticeBar.name]: NoticeBar,
  },
  setup() {
    return {};
  },
});
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.chat-container {
  padding: 10px 24px 0;

  &__notice {
    border-radius: $border-radius-max;
    height: 24px;
    padding: 0 $padding-xs;
    margin-bottom: 10px;

    ::v-deep .van-notice-bar__left-icon {
      color: $gray-8;
    }
  }
  .top-box{
    display: flex; justify-content: flex-start; align-items: center; height:48px; margin:24px 0 36px; background-color:#fff; border-radius:24px; white-space:nowrap; overflow:hidden; padding:0 24px; font-size:24px; color:#999;
    .top{ margin-left:20px;}
  }
}
</style>
